<template>
  <div class="board-column">
    <div class="board-column-header" :style="'background:'+milestoneData.color+'; height: '+milestoneData.heightValue+'px'">
      <div style="font-weight:bold">{{ milestoneData.milestoneName }}（{{milestoneData.planCount}}）</div>
      <div style="font-size:12px;">{{$toolUtil.formatDateToSpotDate(new Date(milestoneData.planBeginDate))}} - {{$toolUtil.formatDateToSpotDate(new Date(milestoneData.planEndDate))}}</div>
    </div>
    <div   style="overflow-y:scroll; max-height:600px;">
       <div v-if='milestoneData.planList && milestoneData.planList.length == 0' style="font-size:14px; margin-top:20px; text-align:center;">
          <i class="el-icon-hot-water"></i> 暂无计划
       </div>
      <draggable
          chosenClass="chosen" 
          animation='500'
          :list="milestoneData.planList"
          v-bind="$attrs"
          class="board-column-content"
          :set-data="setData"
          draggable= ".item" 
          filter=".filter"
          @start="onStart" 
          @end="onEnd"
          @change="onChange"
        > 
          <div  v-for="element in milestoneData.planList" :key="element.id" :class="(milestoneData.dragPermission && milestoneData.dragFlag == '1')? 'board-item item': 'board-item'"  :style="'border-left: 6px solid '+milestoneData.color"  @click.stop="openDetail(element)">
              <div v-if="element.parentPlanId" style="float:left; width:100%;padding-top:0px;height: 30px;" @click.stop="openParent(element.parentPlanId)">
                <span style="background:#f3f3f3; padding:2px 8px 2px 4px; margin:px 0; font-size:12px;"><span style='font-weight:bold;'>属于：</span>{{element.parentPlanName}}</span>
              </div>
              <div style="float:left; width:100%;">
                <div style="float:left; width:90%;   line-height:1.3;">
                  <i v-if="element.planType == '需求'" class="el-icon-s-opportunity" style="color:#4A9FF9;padding-right:5px;" alt='需求'></i>
                  <i v-if="element.planType == '任务'"  class="el-icon-s-claim" style="color:#4A9FF9;padding-right:5px;"  alt='任务'></i>
                  <i v-if="element.planType == '其它'"  class="el-icon-coordinate" style="color:#4A9FF9;padding-right:5px;"  alt='其它'></i>
                  <span :style="'font-size:14px; color:'+(element.color? element.color: '#444444')">{{element.planName}}</span>
                </div>
                <div style="float:right; width:10% padding-left:20px;">
                  <el-dropdown :show-timeout='10' :hide-on-click="false" @command='deletPlanItem(element)' size='mini' >
                    <span class="el-dropdown-link">
                      <i class="el-icon-more-outline el-icon--right"></i>
                    </span>
                    <el-dropdown-menu  slot="dropdown">
                        <el-dropdown-item >删除</el-dropdown-item>
                      <!-- <el-dropdown-item v-for="typeItme in milestoneData.milestoneType" :key="typeItme.id">{{typeItme.milestoneName}}</el-dropdown-item> -->
                    </el-dropdown-menu>
                  </el-dropdown>
                </div>
              </div>
              
              <div style="float:left; width:100%;height: 25px;">
                <div style="float:left; ">
                  <span style="font-size:12px; font-weight:bold;"> 迭代：</span><span style="font-size:12px; color:#666666;"> {{element.iterationName}}</span>
                </div>
                <div style="float:right; ">
                  <span style="font-size:12px;"><i class="el-icon-user"></i> {{element.respsbltPersonName}}</span>
                </div>
              </div>
              <div style="float:left; width:100%;padding-top:0px;height: 25px;">
                <div style="float:left; ">
                  <span style="font-size:12px;font-weight:bold;"> 计划:</span><span style="font-size:12px; color:#666666;"> {{$toolUtil.formatDateToSpotDate(new Date(element.planBeginDate))}} - {{$toolUtil.formatDateToSpotDate(new Date(element.planFinishDate))}}</span>
                </div>
                <div v-if="element.children && element.children.length > 0" style="float:right;"  @click.stop="openChildren(element)">
                  <span style="background:#f3f3f3; padding:0px 8px 0 4px; margin:0px; font-size:14px;"><svg-icon iconClass="shuxing" style="font-size:14px;color:#666"/> {{element.children.length}}</span>
                </div>
              </div>
              <div style="float:left; width:100%;padding-top:0px;height: 25px;">
                <div style="">
                  <span style="font-size:12px;font-weight:bold;float:left; "> 进度:</span><span style="float:left; width:85%; padding:5px 0 0 4px;"><el-progress :percentage="element.progress"></el-progress></span>
                </div>
              </div>
          </div>
      </draggable>
    </div>
    <div v-if="milestoneData.addPlanFlag == '1'" class="board-add" @click="openAddDialog">
        <i class="el-icon-plus" style="font-weight: bold;"></i>
    </div>
     <el-dialog custom-class='childPlan' title="子计划列表" width="70%" :visible.sync="childPlanDialog" :append-to-body='true' :destroy-on-close='true' :close-on-click-modal="false">
        <el-table
            :data="childData"
            border
            style="width: 100%;margin-bottom:30px;">
            <el-table-column
              prop="planName"
              label="子计划"
              width="">
            </el-table-column>
             <el-table-column
              prop="milestoneName"
              label="里程碑"
              width="150">
            </el-table-column>
            <el-table-column
              prop="planType"
              label="计划类型"
              width="120">
            </el-table-column>
            <el-table-column
              prop="respsbltPersonName"
              label="责任人"
              width="120">
            </el-table-column>
            
            <el-table-column
              prop="planBeginDate"
              label="计划开始时间"
              width="120">
            </el-table-column>
            <el-table-column
              prop="planFinishDate"
              label="计划完成时间"
              width="120">
            </el-table-column>
            <el-table-column
              prop="progress"
              label="进度(%)"
              width="80">
            </el-table-column>
            <el-table-column
              fixed="right"
              label="操作"
              width="100">
              <template slot-scope="scope">
                <el-button @click="openDetail(scope.row)" type="text" size="small">查看</el-button>
                <el-button @click="deletPlanItem(scope.row)" type="text" size="small">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
      </el-dialog>
  </div>
</template>

<script>
import draggable from 'vuedraggable'

export default {
  name: 'DragKanbanDemo',
  components: {
    draggable
  },
  props: {
    milestoneData: {
      type: Array,
      default() {
        return {}
      }
    },
    options: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    return {
      childPlanDialog: false,
      childData: []
    }
  },
  mounted(){
    
  },
  methods:{
    /**
     * 打开添加计划对话框
     */
    openAddDialog(){
      let plan={
        id: this.milestoneData.id,
        milestoneName: this.milestoneData.milestoneName
      }
      this.$emit('openAddPlanDialog',plan);
    },
    /**
     * 打开计划明细
     */
    openDetail(row){
      this.$emit('openUpdatePlanDialog',row);
    },
    /**
     * 打开子计划列表
     */
    openChildren(item){
      this.childData =  item.children;
      this.childPlanDialog= true;
    },
    /**
     * 删除计划
     */
    deletPlanItem(row){
      if(row.children && row.children.length >0){
        this.$message({
          type: 'warning',
          message: '存在子任务，请先删除子任务!'
        });
      }
      else{
        this.$emit('deletePlan',row);
      }
    },
    /**
     * 打开父计划
     */
    openParent(parentId){
      this.$console.log('===打开父计划');
      let plan = {
        id: parentId,
      }
      this.$emit('openUpdatePlanDialog',plan);
    },
    setData(dataTransfer) {
      // to avoid Firefox bug
      // Detail see : https://github.com/RubaXa/Sortable/issues/1012//this.$console.log
      dataTransfer.setData('Text', 'asdasd==')
    },
    //开始拖拽事件
    onStart(env){
      this.$console.log('==开始拖动');
    },
    //拖拽结束事件
    onEnd(env) {
      this.$console.log('==开始拖动');
    },
    onChange(env) {
      this.$console.log('==开始改变');
      this.$emit('handlePlanDrag');
    },
  }
}
</script>
<style lang="scss" scoped>
.board-column {
  min-width: 300px;
  min-height: 100px;
  height: auto;
  overflow: hidden;
  background: #f0f0f0;
  border-radius: 3px;
  -webkit-box-shadow: inset 0px 2px 6px 2px rgb(0 0 0 / 5%);
  box-shadow: inset 0px 2px 6px 2px rgb(0 0 0 / 5%);

  .board-column-header {
    // height: 50px;
    line-height: 20px;
    overflow: hidden;
    padding: 10px 20px;
    text-align: center;
    color: #fff;
    -webkit-box-shadow:  0px 1px 5px 2px rgb(0 0 0 / 17%);
    box-shadow: 0px 1px 5px 2px rgb(0 0 0 / 17%);
  }

  .board-column-content {
    height: auto;
    overflow: hidden;
    border: 7px solid transparent;
    min-height: 10px;
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
    align-items: center;

    .board-item {
      cursor: pointer;
      width: 98%;
      margin: 5px 0;
      background-color: #fff;
      text-align: left;
      line-height: 30px;
      padding: 10px 20px;
      box-sizing: border-box;
      box-shadow: 1px 1px 4px 1px rgb(0 0 0 / 20%);
      -webkit-box-shadow: 1px 1px 4px 1px rgb(0 0 0 / 20%);
      border-radius: 4px;
      border-left: 8px solid #ffffff;
    }
    .board-item:hover{
        border-left: 6px solid #929292 !important;
        -webkit-transition: all 0.5s cubic-bezier(0, 0, 0, 0.48);
        -moz-transition: all 0.5s ease;
        transition: all 0.5s ease;
    }
  }
  .board-add{
    padding: 5px 0;
    margin:0 7px 10px 7px;
    background-color: #fff;
    text-align: center;
    font-weight: bold;
    border-radius: 4px;
    cursor: pointer;
    font-weight: bold;
    -webkit-box-shadow:  0px 1px 3px 0 rgba(0, 0, 0, 0.2);
    box-shadow: 0px 1px 3px 0 rgba(0, 0, 0, 0.2);
  }

  .board-add:hover{
    background: #fbfbfb;
  }
}
  /*选中样式*/
  .chosen {
    border: solid 2px #3089dc !important;
  }

  
</style>